<template>
	<el-dialog v-model="dialogVisible" width="437px" :before-close="handleClose">
		<div class="c" style="border: 1px solid #e4e4e4; border-radius: 3px">
			<div class="top-nav">
				<div class="top_nav_hover" @click="selectType(0)" :style="{ backgroundColor: props.view[0].backgroundColor, color: props.view[0].color }">
					<img :src="topNavBlack" />
					<span class="tit">{{ props.view[0].title }}</span>
				</div>
			</div>

			<div v-for="(item, index) in props.view" :key="index">
				<component v-if="props.typeList[item.type]" :is="props.typeList[item.type].com" :data="item"></component>
			</div>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import Banner from '/@/components/buildPage/View/Banner.vue';
import Product from '/@/components/buildPage/View/Product.vue';

import topNavBlack from '/@/assets/images/topNavBlack.png';

const form = ref({});
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	view: {
		type: Object,
		default: () => {},
	},
	typeList: {
		type: Object,
		default: () => {},
	},
});

const dialogVisible = ref(false);

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
		}
	}
);

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	emit('handleClose');
}
</script>

<style lang="scss">
.desc_label {
	width: 20px;
}

.c {
	width: auto;
	max-width: 400px;
	position: relative;

	.top_nav_hover {
		position: relative;

		& * {
			pointer-events: none;
		}

		&:hover {
			// transform: scale(0.95);
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 0 10px #afafaf;
		}
	}

	.top-nav {
		position: absolute;
		top: 0;
		background: #fff;
		z-index: 999;
		// transition: all 0.3s;
		display: flex;
		flex-direction: column;

		// & * {
		// 	pointer-events: none;
		// }
		// &:hover {
		// 	// transform: scale(0.95);
		// 	border-radius: 10px;
		// 	overflow: hidden;
		// 	box-shadow: 0 0 10px #afafaf;
		// }
		.tit {
			position: absolute;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
		}

		img {
			max-width: 100%;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}
	}
}
</style>
